﻿
@{
    ViewBag.Title = "SlickCarusela";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Slick Carousel</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Gallery</a>
            </li>
            <li class="active">
                <strong>Slick Carousel</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>

<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="ibox">
                <h4 class="text-center m">
                    Basic example of slick carousel
                </h4>
                <div class="slick_demo_1">

                    <div>
                        <div class="ibox-content">
                            <h2>Slide 1</h2>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen
                                book. It has survived not only five centuries, but also the leap.
                            </p>
                        </div>
                    </div>
                    <div>
                        <div class="ibox-content">
                            <h2>Slide 2</h2>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen
                                book. It has survived not only five centuries, but also the leap.
                            </p>
                        </div>
                    </div>
                    <div>
                        <div class="ibox-content">
                            <h2>Slide 3</h2>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen
                                book. It has survived not only five centuries, but also the leap.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">


            <h4 class="text-center m">
                Multiple example with responsive breakpoints
            </h4>



            <div class="slick_demo_2">

                <div>
                    <div class="ibox-content">
                        <h2>Slide 1</h2>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                            Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                            unknown printer took a galley of type and scrambled it to make a type specimen
                            book. It has survived not only five centuries, but also the leap.
                        </p>
                    </div>
                </div>
                <div>
                    <div class="ibox-content">
                        <h2>Slide 2</h2>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                            Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                            unknown printer took a galley of type and scrambled it to make a type specimen
                            book. It has survived not only five centuries, but also the leap.
                        </p>
                    </div>
                </div>
                <div>
                    <div class="ibox-content">
                        <h2>Slide 3</h2>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                            Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                            unknown printer took a galley of type and scrambled it to make a type specimen
                            book. It has survived not only five centuries, but also the leap.
                        </p>
                    </div>
                </div>
                <div>
                    <div class="ibox-content">
                        <h2>Slide 4</h2>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                            Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                            unknown printer took a galley of type and scrambled it to make a type specimen
                            book. It has survived not only five centuries, but also the leap.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="ibox">
                <h4 class="text-center m">
                    Animation example with custom speed, ibox title and adoptive height
                </h4>
                <div class="ibox-title">
                    Example title
                </div>
                <div class="slick_demo_3">
                    <div>
                        <div class="ibox-content">
                            <h2>Slide 1</h2>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                book. It has survived not only five centuries, but also the leap.
                            </p>
                        </div>
                    </div>
                    <div>
                        <div class="ibox-content">
                            <h2>Slide 2</h2>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen
                                book. It has survived not only five centuries, but also the leap.
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen
                                book. It has survived not only five centuries, but also the leap.
                            </p>
                        </div>
                    </div>
                    <div>
                        <div class="ibox-content">
                            <h2>Slide 3</h2>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen
                                book. It has survived not only five centuries, but also the leap.
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                book. It has survived not only five centuries, but also the leap.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<!-- Additional style only for demo purpose -->
<style>
    .slick_demo_2 .ibox-content {
        margin: 0 10px;
    }
</style>



@section Styles {
    @Styles.Render("~/plugins/slickStyles")
    @Styles.Render("~/plugins/slickThemeStyles")
}

@section Scripts {
    @Scripts.Render("~/plugins/slick")

    <script type="text/javascript">
        $(document).ready(function () {


            $('.slick_demo_1').slick({
                dots: true
            });

            $('.slick_demo_2').slick({
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 1,
                centerMode: true,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });

            $('.slick_demo_3').slick({
                infinite: true,
                speed: 500,
                fade: true,
                cssEase: 'linear',
                adaptiveHeight: true
            });

        });
    </script>
}



